<template>
  <div>
    <page-header-wrapper />
    <a-card :loading="loading" :title="$t('menu.site.content.nav')" style="margin-top: 10px">
      <a slot="extra" @click="visible = true">新建导航根目录</a>
      <a-table
        :columns="columns"
        :data-source="data"
        :rowKey="record=>record.nav_id"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="_updateNav(record)" style="float: left; margin-right: 10px;">编辑栏目</a>
          <a @click="_addChildrenNav(record)" style="float: left; margin-right: 10px;">添加子栏目</a>
          <a :href="record.url" target="_blank" style="float: left; margin-right: 10px;">浏览页面</a>
          <div class="editable-row-operations">
            <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => _delNav(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="_addNav">
      <a-form-item
      >
        导航目录名称：
        <a-input
          v-model="add.nav_name"
        />
      </a-form-item>
      <a-form-item
      >
        导航目录地址：
        <a-input
          v-model="add.url"
        />
      </a-form-item>
      <a-form-item
      >
        导航目录状态：
        <a-switch v-model="status">
          <a-icon slot="checkedChildren" type="check" />
          <a-icon slot="unCheckedChildren" type="close" />
        </a-switch>
      </a-form-item>
    </a-modal>
  </div>
</template>
<script>
import {
  getNav,
  addNav,
  updateNav,
  delNav
} from '@/api/nav'

const columns = [
  {
    title: 'nav_name',
    dataIndex: 'nav_name',
    key: 'nav_name',
    width: '15%'
  },
  {
    title: 'url',
    dataIndex: 'url',
    key: 'url',
    width: '40%'
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '30%',
    scopedSlots: { customRender: 'operation' }
  }
]

const data = [
]

export default {
  data () {
    return {
      data,
      columns,
      loading: true,
      visible: false,
      searchForm: {
        page: 1
      },
      add: {
        nav_id: '',
        parent_id: 0,
        nav_name: ''
      },
      status: false
    }
  },
  mounted () {
    this._getNav()
  },
  watch: {
    visible (val) {
      if (val === true) {
        this.add = {
          nav_id: '',
          parent_id: 0,
          nav_name: ''
        }
        this.status = false
      }
    }
  },
  methods: {
    _getNav () {
      getNav(this.searchForm).then(res => {
        this.data = res.items
        this.loading = false
      })
    },
    _addNav () {
      this.add.status = this.add.status === 1
      if (this.add.nav_id !== '') {
        updateNav({ navInfo: this.add }).then(res => {
          this.reloadNav()
        })
        return
      }
      addNav({ navInfo: this.add }).then(res => {
        this.reloadNav()
      })
    },
    _delNav (item) {
      delNav(item).then(res => {
        this.reloadNav()
      })
    },
    reloadNav () {
      this._getNav()
      this.visible = false
    },
    _updateNav (item) {
      this.visible = true
      setTimeout(() => {
        this.status = item.status === '1'
        this.add = item
      }, 100)
    },
    _addChildrenNav (item) {
      this.visible = true
      setTimeout(() => {
        this.add.parent_id = item.nav_id
      }, 100)
    }
  }
}
</script>
